<template>
  <!-- 登录模态框 -->
  <div class="model">
    <!-- 遮罩层 -->
    <div class="mask" @click="changeIsShowLoginModal(false)"></div>
    <!-- 登录内容 -->
    <div class="loginBox">
      <div class="close" @click="changeIsShowLoginModal(false)"></div>
      <section class="nav">
        <a href="#" :class="{active:isShowContent}" @click="isShowContent=true">手机号码登录</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="#" :class="{active:!isShowContent}" @click="isShowContent=false">微信扫码登录</a>
      </section>
      <!-- 内容区域 -->
      <div class="content">
        <!-- 手机号码登录 内容 -->
        <div class="phoneLogin" v-show="isShowContent">
          <div class="row">
            <input type="text" class="ipt" placeholder="请输入手机号" />
          </div>
          <div class="row">
            <input type="text" class="ipt" placeholder="向右滑动" />
          </div>
          <div class="row">
            <input type="text" class="ipt" placeholder="请输入短信验证码" />
            <button class="btn btncode">获取验证码</button>
          </div>
          <div class="row">
            <button class="btn btnlogin">登录</button>
          </div>
        </div>
        <!-- 微信扫码登录 内容 -->
        <div class="qrLogin" v-show="!isShowContent">微信扫码登录 内容</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  data(){
    return {
      isShowContent:true
    }
  },
  methods: {
    ...mapMutations({
      changeIsShowLoginModal: "showModal/changeIsShowLoginModal",
    }),
  },
};
</script>

<style lang="less" scoped>
.model {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  .mask {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
  }
  .loginBox {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 555px;
    height: 423px;
    background: url("../assets/img/login-box-bg.png");
    .close {
      position: absolute;
      right: 60px;
      top: 15px;
      height: 22px;
      width: 22px;
      background: url("../assets/img/close.png");
    }
  }
  .nav {
    display: flex;
    justify-content: center;
    padding-top: 50px;
    color: #999;
    a {
      text-decoration: none;
      color: #999;
      margin: 0, 10px;
      &.active {
        color: #000;
      }
    }
  }
  .content{
    width: 350px;
    margin: 20px auto 0;
    height: 300px;
    .phoneLogin{
      .row{
        display: flex;
        margin-bottom: 20px;
      }
      .ipt{
        flex: 1;
        height: 45px;
        padding-left: 10px;
        outline: none;
      }
      .btn{
        background-color: #0a328e;
        color: #fff;
        border: none;
        line-height: 45px;
        cursor: pointer;
      }
      .btncode{
        margin-left: 10px;
      }
      .btnlogin{
        width: 100%;
      }
    }
  }
}
</style>
